<template>
    <div class="pageBox">
        <div class="moduleItem" :key="moduleItem.id" v-for="moduleItem in tempData">
            <div class="moduleCategory"><i class="fa fa-navicon fa-fw"></i> {{moduleItem.category}}</div>
            <div class="moduleContent">
                <div class="moduleContentItemBox" :key="item.fm_id" v-for="item in moduleItem.moduleData">
                    <div class="moduleContentItem">
                        <div class="moduleTitleImage">
                            <img src="~SYSTEM_IMAGE/test/qiye.png" />
                        </div>
                        <div class="moduleName"><b>{{item.fm_name}}</b><b style="float:right;color:#999">{{item.fm_author_name}}</b></div>
                        <div class="moduleTags">
                            <span :key="tag.id" v-for="tag in item.fm_tags">{{tag}}</span>
                        </div>
                        <div class="moduleDesc">{{item.fm_desc}}</div>
                        <div class="moduleSubmit">
                            <div class="moduleInstallCount">安装次数：{{item.fm_install_count}}次</div>
                            <div class="moduleInstallRate"><span style="float:left">好评程度：</span><el-rate v-model="item.fm_rate"></el-rate></div>
                            <div class="moduleBtnBox">
                                <el-button type="primary" @click="installFunctionModule(item)">获取模块</el-button>
                            </div>
                        </div>
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rateValue : 2,
                tempData  : [
                    {  
                        category   : "内容管理相关",
                        moduleData : [
                            {
                                fm_id            : "1",
                                fm_name          : "新闻管理模块",
                                fm_project_name  : "newsManager",
                                fm_desc          : "新闻管理模块，可以对新闻业务进行相关的创建管理工作",
                                fm_tags          : ["新闻","信息管理"],
                                fm_install_count : 88,
                                fm_is_manager    : 1,
                                fm_rate          : 3,
                                fm_author_id     : "1",
                                fm_author_name   : "李卯卯",
                                fm_install_dir   : "http://localhost/extensionInstall/newsManager"
                            }
                        ]
                    }
                    
                ]
            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            // ...mapState({ })
        },
        //组件方法
        methods: {
            // ...mapMutations()

            //点击安装模块
            installFunctionModule(item){

                var params = {
                    fm_fmid        : item.fm_id,
                    fm_name        : item.fm_name,
                    fm_install_dir : item.fm_install_dir,
                    fm_dir_name    : item.fm_project_name,
                    fm_is_manager  : item.fm_is_manager
                }

                this.$myLoading.startLoading()
                this.$http.postHttp(this.$API.systemApiAddExtensionFunctionModule,params,(rs) => {
                    this.$myLoading.endLoading()
                    this.$myPop.SuccessMessage()    
                })

            }
        }
    }
</script>

<style lang="stylus" scoped>
.moduleItem {
    width 100%
    height auto
    float left

    .moduleCategory {
        width 100%
        height 40px
        font-size 14px
        line-height 40px
        font-weight bold

        i{
            margin-left 8px
        }

    }


    .moduleContent {
        
        width 100%
        height auto

        .moduleContentItemBox {
            width 33.33333%
            height 185px  
            float left
            position relative
            margin-bottom 10px

           
        }

        .moduleContentItem {
            position absolute
            top 0px
            left 10px
            right 10px
            bottom 10px
            background #fefefe
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            border 1px solid #eee
        }

        .moduleTitleImage {
            width 100px
            height 100px
            float left
            margin 10px   
            background #eee 
            border 1px solid #eee
            text-align center

            img {
                width 90%
                height 90%
                margin-top 10px
                margin-left 5px
            }

        }

        .moduleName {
            position absolute
            left 120px
            right 10px
            top 10px
            height 20px
            line-height 20px
            float left    
            font-size 14px
        }

        .moduleTags {
            position absolute
            left 120px
            right 10px
            top 32px
            height 20px
            line-height 20px
            float left    

            span {
                padding-left 4px
                padding-right 4px
                background #eee
                border-radius 5px
                margin-right 5px
                color #666

                &:first-child {
                    margin-left -2px
                }
            }
        }

        .moduleDesc {
            position absolute
            left 120px
            right 10px
            top 55px
            color #999
            height 56px
            line-height 20px
            float left 
            overflow hidden
        }

        .moduleSubmit {
            width 100%
            height auto
            background #fff
            float left    

            .moduleInstallCount {
                width 150px 
                height 20px   
                margin-top 2px
                line-height 20px
                margin-left 10px
            }
            
            .moduleInstallRate {
                width 350px 
                height 20px   
                margin-top 2px
                line-height 20px
                margin-left 10px
            }

            .moduleBtnBox {
                width 100px
                height 40px
                position absolute
                right 10px
                bottom 10px
            }
        }

        

    }
}
</style>